<template>
    <div class="role_selector">
        <Table ref="TableRef" :getData="pageList" :form-data="formData" :table-height="400">
            <template v-slot:from_search>
                <el-form-item>
                    <el-input v-model="formData.name" placeholder="名称" clearable />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="search" :icon="'Search'">查询</el-button>
                </el-form-item>
            </template>
            <template v-slot:columns>
                <el-table-column property="name" label="名称" />
            </template>
        </Table>
        <div class="footer">
            <el-button @click="cancel">取消</el-button>
            <el-button type="primary" @click="sure">
                确定
            </el-button>
        </div>
    </div>
</template>
<script setup>
import { ref, reactive } from "vue"
import Table from '@/components/Table.vue'
import { pageList } from '@/api/system/role'
import { ElMessage } from 'element-plus'

const emit = defineEmits(['cancel', 'sure'])
const TableRef = ref(null)


const props = defineProps({
    excludeSupperManager: {
        type: Boolean,
        default: true
    }
})

const formData = reactive({
    name: undefined,
    excludeSupperManager: props.excludeSupperManager
})

const search = () => {
    TableRef.value.queryData()
}

const sure = () => {
    let selectRows = TableRef.value.getSelection()
    if (selectRows == undefined || selectRows.length < 1) {
        ElMessage({
            message: '请选择一个角色！',
            type: 'warning',
        })
        return
    }
    emit('sure', selectRows)
}
const cancel = () => {
    emit('cancel')
}



</script>
<style scoped lang="scss">
.role_selector {
    height: 50%;
    width: 100%;

    .pagination {
        margin-top: 20px;
        display: flex;
        justify-content: center;
    }

    .footer {
        margin-top: 20px;
        display: flex;
        justify-content: end;
    }

}
</style>
